<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    @include('public.h5_head')
    <title>支付</title>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/pay.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/animate.min.css"/>
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<body>
<div id="box_pay">
    <div class="pay">
        <div class="pay_bottom">
            测试在线人数
        </div>
        <button class="test-buy">购买</button>
        <br>
        当前在线:<span class="test">0</span>人
        <hr>
        <br>
        <div class="user-come-on">
            @if(count($newlists) > 0)
                @foreach($newlists as $k => $v)
                    @if($v['status'] == 'come_on')
                    <p><img width='30' src="{{ $v['face'] }}" > 来了<br></p>
                    @elseif($v['status'] == 'buy')
                        <p><img width='30' src="{{ $v['face'] }}" > 买了 {{ $v['num'] }} 手 😆</br> </p>
                    @endif
                @endforeach
            @endif
        </div>
    </div>


</div>
</body>
<meta name="csrf_token" id="token" content="{{ csrf_token() }}">
<script>
    var pro_id = '1';
    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:7272);
     */

            // 服务端主动推送消息时会触发这里的onmessage
    var domain_name = '{{ env('DOMAIN_NAME') }}';
    ws = new WebSocket("wss://"+domain_name+":8282");
    ws.onopen = function() {
//        ws.send('1');
    };
    ws.onmessage = function(e) {
        var data = eval("("+e.data+")");

        var type = data.type || '';

        switch(type){
                // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                $.ajax({
                    url:'/websocket/joinGroup',
                    type:'POST',
                    data:{info:data.client_id,pro_id:pro_id},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.success == true)
                        {
                        }else{
                        }
                    }
                });
                break;

            case  'group_total':
                    $('.test').text(data.message);
                break;
            case  'login_out':
                $.ajax({
                    url:'/websocket/leaveGroup',
                    type:'POST',
                    data:{info:data.client_id,pro_id:pro_id},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.success == true)
                        {
                        }else{

                        }
                    }
                });

                break;
            case 'come_on':
                    var come_on = "<p><img width='30' src="+data.message+" > 来了</br> </p>";
                    $('.user-come-on').children().eq(0).remove();
                    $('.user-come-on').append(come_on);
                break;

            case 'buy':
                var come_on = "<p><img width='30' src="+data.face+" > 买了 "+data.num+" 手 😆</br> </p>";
                $('.user-come-on').children().eq(0).remove();
                $('.user-come-on').append(come_on);
                break;
                // 当mvc框架调用GatewayClient发消息时直接alert出来
            default :

        }

    };

    $('.test-buy').click(function () {
        $.ajax({
            url:'/websocket/buyTestPro',
            type:'POST',
            data:{pro_id:pro_id},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            dataType:'json',
            success:function(data){
                if(data.success == true)
                {
                }else{
                }
            }
        });
    })


</script>
</html>
